/** *
Copyright (c) 2020 kedacom * OpenATC is licensed under Mulan PSL v2. * You
can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at: *
http://license.coscl.org.cn/MulanPSL2 * THIS SOFTWARE IS PROVIDED ON AN 'AS IS'
BASIS, WITHOUT WARRANTIES OF ANY KIND, * EITHER EXPRESS OR IMPLIED, INCLUDING
BUT NOT LIMITED TO NON-INFRINGEMENT, * MERCHANTABILITY OR FIT FOR A PARTICULAR
PURPOSE. * See the Mulan PSL v2 for more details.
**/
<template>
  <div class="intersectin-with-pattern" v-show="isShow">
    <div class="intersection-container">
      <intersection-with-interface
        v-if="isRenew"
        ref="intersectionWithInterface"
        :isShowState="isShowState"
        :isShowMode="isShowMode"
        :AgentId="agentid"
        :roadDirection="roadDirection"
        @getTscControl="getTscControl"
      ></intersection-with-interface>
    </div>
    <div class="pattern-container" v-if="true">
      <!-- 没ring数据显示方案图 -->
      <pattern-list
        v-if="
          (controlData &&
            !controlData.rings &&
            contrloType === 'ring' &&
            !controlData.syncTime) ||
            (controlData && !controlData.rings && contrloType === 'ring')
        "
        :showBarrier="true"
        :isShowTip="false"
        :contrloType="contrloType"
        :syncTime="controlData.syncTime"
        :patternStatusList="patterData ? patterData.rings : []"
        :cycles="patterData ? patterData.cycle : 0"
        :isPhase="false"
        :phaseList="phaseList"
      >
      </pattern-list>
      <!-- 1049没ring数据显示阶段图 -->
      <pattern-list
        v-else-if="controlData && !controlData.rings && contrloType === 'stage'"
        ref="boardCard"
        :stagesChange="patterData ? patterData.stagesList : []"
        :contrloType="contrloType"
        :isShowTip="false"
        :controlData="controlData"
        :cycles="patterData ? patterData.cycle : 0"
        :syncTime="controlData.syncTime"
        :localPatternList="allPatternList"
        :showBarrier="true"
        :isPhase="false"
        :phaseList="phaseList"
      >
      </pattern-list>
      <pattern-list
        v-else
        ref="boardCard"
        :cycle="crossStatusData ? crossStatusData.cycle : 0"
        :syncTime="crossStatusData ? crossStatusData.syncTime : 0"
        :controlData="controlData"
        :contrloType="contrloType"
        :isShowTip="false"
        :localPatternList="allPatternList"
        :phaseList="phaseList"
        :showBarrier="true"
        :isPhase="false"
        :agentId="agentid"
      >
      </pattern-list>
    </div>
  </div>
</template>

<script>
import Flv from '../Flvjs/index.vue'
// import { getMessageByCode } from '../utils/responseMessage'
import { getIntersectionInfo } from '../../api/template'
import { mapState } from 'vuex'
export default {
  name: 'IntersectinWithPattern',
  components: {
    Flv
  },
  props: {
    agentid: {
      type: String,
      default: ''
    },
    isShowVideo: {
      type: Boolean,
      defaultValue: false
    }
  },
  computed: {
    ...mapState({
      roadDirection: state => state.globalParam.roadDirection
    }),
    patterData () {
      const res = this.allPatternList.filter(item => {
        return item.id === this.controlData.patternid
      })[0]
      return res
    }
  },
  watch: {
    phaseList: {
      handler: function (val, oldVal) {
        // this.getPedPhasePos()
      },
      // 深度观察监听
      deep: true
    },
    agentid: {
      handler: function (val) {
        this.isRenew = false
        this.phaseList = []
        this.$nextTick(() => {
          this.isRenew = true
        })
      },
      deep: true
    }
  },
  data () {
    return {
      isRenew: true,
      controlData: {},
      checked: false,
      overlap: [],
      contrloType: '',
      narr: [],
      // patternList: [],
      // patternSelect: [], // 所有方案id
      // planPattern: {}, // 默认显示方案
      allPatternList: [], // 所有方案
      phaseList: [],
      crossStatusData: {},
      ParamsMode: new Map([
        [0, '自主控制'],
        [1, '本地手动'],
        [2, '平台控制'],
        [3, '配置软件控制'],
        [4, '遥控器控制'],
        [5, '黄闪器控制'],
        [6, '降级控制'],
        [7, '脚本控制'],
        [8, '算法控制']
      ]),
      ParamsModeEn: new Map([
        [0, 'Autonomous Control'],
        [1, 'Local Manual'],
        [2, 'Platform Control'],
        [3, 'Configuration Software Control'],
        [4, 'Remote Control'],
        [5, 'Yellow Flasher Control'],
        [6, 'Degradation Control'],
        [7, 'Script Control'],
        [8, 'Algorithm Control']
      ]),
      ParamsControl: new Map([
        [0, '多时段'],
        [1, '黄闪'],
        [2, '全红'],
        [3, '关灯'],
        [4, '步进'],
        [5, '定周期控制'],
        [6, '单点感应控制'],
        [7, '协调感应控制'],
        [8, '方案选择控制'],
        [9, '自适应控制'],
        [10, '无电缆控制'],
        [11, '有电缆控制'],
        [12, '行人过街控制'],
        [13, '方案恢复过渡'],
        [14, '相位驻留'],
        [15, '通道检测'],
        [16, '方向锁定'],
        [17, '韦伯斯特单点控制'],
        [18, '预留18'],
        [19, '感应式行人过街'],
        [20, '方案干预'],
        [100, '方案干预'],
        [21, '预留21'],
        [22, '相位锁定'],
        [23, '相位放行控制'],
        [24, '紧急控制'],
        [99, '设备维护']
      ]),
      ParamsControlEn: new Map([
        [0, 'Multi Period'],
        [1, 'Yellow Flash Control'],
        [2, 'Red Control'],
        [3, 'Dark Control'],
        [4, 'Step'],
        [5, 'Fixed_Cycle Control'],
        [6, 'Free Control'],
        [7, 'Coordinated Induction Control'],
        [8, 'Pattern Selection Control'],
        [9, 'Adaptive Control'],
        [10, 'Wireless Control'],
        [11, 'Cable Control'],
        [12, 'Pedestrian Crossing Control'],
        [13, 'Pattern recovery'],
        [14, 'Phase dwell'],
        [15, 'Channel Detection'],
        [16, 'Direction lock'],
        [17, 'Webster Single Point Coordination'],
        [18, 'Reserving18'],
        [19, 'Inductive Pedestrian Crossing Control'],
        [20, 'Program Intervention'],
        [100, 'Program Intervention'],
        [21, 'Reserving21'],
        [22, 'Priority Control'],
        [23, 'Close Phase'],
        [24, 'Emergency Control'],
        [99, 'Device Mantenance']
      ]),
      phaseType: new Map([
        [1, '红'],
        [2, '黄'],
        [3, '绿'],
        [4, '绿闪']
      ]), // phaseType表示红，黄，绿
      phaseTypeEn: new Map([
        [1, 'Red'],
        [2, 'Yellow'],
        [3, 'Green'],
        [4, 'Greenclear']
      ]), // phaseType表示红，黄，绿
      // up 冗余
      isShowState: false,
      isShowMode: false,
      isShow: true,
      isBtnDisabled: false,
      autoPlay: true
    }
  },
  methods: {
    async changeControlPattern (reqData) {
      // console.log('changeControlPattern')
      //   reqData = {
      //     'mode': 0,
      //     'control': 1,
      //     'terminal': 1,
      //     'delay': null,
      //     'duration': null,
      //     'value': 0
      //   }
      let res = await this.$refs.intersectionWithInterface.changeControlPattern(reqData)
      //   console.log(res)
      //   console.log(reqData)
      return res
    },
    onCloseClick () {
      this.isShow = false
    },
    show () {
      this.isShow = true
    },
    getTscControl (res) {
      let resControl =
        res && res.data && res.data.data && res.data.data.data
          ? res.data.data.data
          : null
      this.$emit('getTscControl', res)
      this.controlData = this.handleGetData(resControl)
      // console.log('controlData', this.controlData)
      if (resControl) {
        this.crossStatusData = JSON.parse(JSON.stringify(resControl))
      } else {
        this.crossStatusData = {}
      }
      if (!this.phaseList || this.phaseList.length === 0) {
        this.getIntersectionInfo(this.agentid)
      }
    },
    async getIntersectionInfo (agentid) {
      // console.log('onSearch once!')
      // 获取路口信息
      getIntersectionInfo(agentid).then(res => {
        if (!res || !res.data.success) {
          return false
        }
        this.allPatternList = res.data.data.param.patternList
        if (
          !this.allPatternList[0].contrloType &&
          this.allPatternList[0].rings.length > 0
        ) {
          this.contrloType = 'ring'
        } else if (
          !this.allPatternList[0].contrloType &&
          this.allPatternList[0].rings.length === 0
        ) {
          this.contrloType = 'stage'
        } else {
          this.contrloType = this.allPatternList[0].contrloType
        }
        this.phaseList = res.data.data.param.phaseList
      })
    },
    handleGetData (data) {
      let that = this
      if (data.name === '') {
        if (that.$i18n.locale === 'en') {
          data.name = 'Pattern' + data.patternid
        } else if (that.$i18n.locale === 'zh') {
          data.name = '方案' + data.patternid
        }
      }
      Object.keys(data).forEach(function (key) {
        if (that.$i18n.locale === 'en') {
          if (key === 'mode') {
            if (data[key] > 0 && data[key] < 6) {
              data[key] = that.ParamsModeEn.get(data[key])
            } else {
              data[key] = that.ParamsModeEn.get(0)
            }
          }
          // if (key === 'control') {
          //   data[key] = that.ParamsControlEn.get(data[key])
          // }
          if (key === 'phase' || key === 'overlap') {
            for (let val of data[key]) {
              val.typestr = that.phaseTypeEn.get(val.type)
              val.pedtypestr = that.phaseTypeEn.get(val.pedtype)
            }
          }
        } else if (that.$i18n.locale === 'zh') {
          if (key === 'mode') {
            if (data[key] > 0 && data[key] < 6) {
              data[key] = that.ParamsMode.get(data[key])
            } else {
              data[key] = that.ParamsMode.get(0)
            }
          }
          // if (key === 'control') {
          //   data[key] = that.ParamsControl.get(data[key])
          // }
          if (key === 'phase' || key === 'overlap') {
            for (let val of data[key]) {
              val.typestr = that.phaseType.get(val.type)
              val.pedtypestr = that.phaseType.get(val.pedtype)
            }
          }
        }
      })
      return data
    }
  }
}
</script>
<style scoped></style>
